<template>
    <div>
        <a-upload
            @change="onChange"
            name="file"
            v-bind="$attrs"
            action="/system/api/upload/file"
            :showUploadList="true"
            :accept="accept"
            v-if="delVisible"
            :beforeUpload="beforeUpload"
            :file-list="fileLists"
        >
            <a-button :disabled="$attrs.disabled || false">
                <a-icon type="upload"/>
                上传文件
            </a-button>
            <span style="font-size: 10px;color: #818181;"><br/>
            文件大小: {{ (size / 1024 / 1024) + 'M' }}<br/>
            支持格式: {{ accept }}</span>
        </a-upload>
        <div v-else>
            <span v-if="!fileList.length">暂无文件</span>
            <!--      <a-button type="primary" v-else>-->
            <!--        <a :href="'/'+value" target="_blank">查看文件</a>-->
            <!--      </a-button>-->
            <a-button type="danger" @click="clear" v-if="delVisible" style="margin-left: 16px;">
                删除文件
            </a-button>
        </div>
    </div>
</template>

<script>
export default {
    name: "xlUploadFiles",
    data() {
        return {
            fileLists: [],
            size: 2097152,
            accept: '.pdf, .docx, .doc, .xls, .xlsx'
        }
    },
    props: {
        fileList: {
            type: Array,
            default: () => []
        },
        specifications: {
            type: String,
            default: '2097152;.pdf,.docx,.doc,.xls,.xlsx'
        },
        delVisible: {
            type: Boolean,
            default: true
        }
    },
    model: {
        prop: 'fileList',
        event: 'change'
    },
    created() {
        if (this.specifications) {
            let specifications = this.specifications.split(';')
            this.size = Number(specifications[0])
            this.accept = specifications[1]
        }
        if (this.fileList) {
            this.fileLists = this.fileList
        } else {
            this.fileLists = []
        }
    },
    methods: {
        beforeUpload(e) {
            if (e.size > this.size) {
                this.$message.error('文件大小超出限制')
                return false
            }
            let fileAccept = e.name.split('.').pop()
            let accept = this.accept.slice(1).split(',.')
            if (accept.indexOf(fileAccept) == -1) {
                this.$message.error('文件格式错误')
                return false
            }
        },
        onChange(info) {
            if (info.fileList.length == 0) {
                this.$emit('change', null)
                return
            }
            this.fileLists = info.fileList
            if (info.file.status === 'done') {
                this.$message.success(`${info.file.name} 上传成功`)
                let fileList = this.fileLists.map((item, index) => {
                    return {
                        uid: index,
                        name: item?.response?.result?.fileName || '',
                        status: 'done',
                        url: item?.response?.result?.path || ''
                    }
                })
                this.$emit('change', fileList)
                this.$emit('zyChange',info.file)
            } else if (info.file.status === 'error') {
                this.$message.error(`${info.file.name} 上传失败`)
            }
        },
        clear() {
            this.$confirm({
                title: '提示',
                content: '确认删除',
                onOk: () => {
                    this.$emit('change', '')
                }
            })
        }
    },
    watch: {
        fileList() {
            if (this.fileList.length) {
                this.fileLists = this.fileList.map(item => {
                    return {
                        uid: item.uid,
                        name: item.name,
                        url: item.url,
                        status: item.status
                    }
                })
            } else {
                this.fileLists = []
            }
        }
    }
}
</script>

<style scoped>

</style>
